<template>
  <view class="bottom-container">
    <view class="left" @click="onClickComment">
      <mySearch
        :placeholderText="placeHolder"
        :searchBarConfig="{
          height: 28,
          backgroundColor: '#eeedf4',
          border: 'none',
          textColor: '#a6a5ab',
          icon: '/static/images/input-icon.png',
        }"
      >
      </mySearch>
    </view>

    <view class="right">
      <!-- 点赞 -->
      <view class="praise" @click="onClickPraise"><article-praise :isPraised="articleDetail.isPraise || false"></article-praise></view>
      <!-- 收藏 -->
      <view class="collet"><article-collect></article-collect></view>
    </view>
  </view>
</template>

<script>
import ArticleCollect from "../article-collect/article-collect.vue";
import ArticlePraise from '../../components/article-praise/article-praise.vue';
import mySearch from '../../components/mySearch/mySearch.vue';
import { mapActions } from "vuex";
import { userPraise } from "../../apis/user";
export default {
  components: { mySearch, ArticlePraise, ArticleCollect },
  name: "article-bottom",
  props:{
    articleId:{
      type:String,
      required:true
    },
    articleDetail:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    placeHolder:{
      type:String,
      default:'评论一句，前排打call'
    }
  },
  data() {
    return {
     
    };
  },
  methods: {
    ...mapActions("user", ["isLogin"]),
    async onClickComment() {
      // console.log('clickComment');
      const res = await this.isLogin();
      if (!res) {
        return;
      }
      this.$emit("onComment");
    },
    async onClickPraise(){
      uni.showLoading({
        title:'加载中'
      })
      const res = await this.isLogin();
      if (!res) {
        return;
      }
      const resPraise = await userPraise({
        articleId:this.articleId,
        isPraise:!this.articleDetail.isPraise
      })
      
      await this.$emit('changeIsPraise', !this.articleDetail.isPraise)

      uni.showToast({title:'已点赞'})

      // console.log(resPraise);

    }
  },
};
</script>

<style lang="scss" scoped>
.bottom-container {
  width: 100%;
  // height: 30px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 15px 25px 15px;
  display: flex;
  // justify-content: space-around;
  align-items: center;
  background-color:#fff;
  .left {
    flex: 2;
    // background-color: orange;
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // background-color: pink;
  }
}
</style>
